<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData"
                   @on-selection-change="selectionChange"></Table>
          </div>
           <div class="normal-list-page-ft clearfix">
          <Page class="fr"
                :total="queryData.totalRecord"
                :page-size="queryData.pageSize"
                :current="queryData.page"
                @on-change="changePage"
                @on-page-size-change="onPageSizeChange"
                show-elevator
                show-total
                show-sizer></Page>
        </div>
        </div>
       <!-- 修改二级标准 -->
        <Modal v-model="modal.level2.isShow"
               :loading="modal.level2.loading"
               :mask-closable="false"
               :title="modal.level2.title"
               @on-ok="postData">
          <Form ref="systemFrom"
                :model="modal.level2.formData"
                :rules="modal.level2.rules"
                :label-width="120">

            <!-- <FormItem label="项目名称"
                      prop="name">
              <Input placeholder="请输入项目名称"
                     v-model="modal.level2.formData.name"
                     style="width:300px;" />
            </FormItem> -->
             <FormItem label="名称"
                      prop="name">
              <Input placeholder="请输入名称"
                     v-model="modal.level2.formData.name"
                     type="textarea"
                     style="width:300px;" />
            </FormItem>

          </Form>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
import AreaApi from '@/api/check/voArea.js'
export default {
  name: 'mallCategory',
  components: {
    uploadImage,
    WangEditor,
    Uploadoss
  },
  props: {
    row: Object
  },
  data () {
    return {
      // 弹出层数据
      modal: {
        level2: {
          isShow: false,
          loading: true,
          type: 'update', // create 新建，update 修改
          title: '修改二级区域',
          formData: {},
          rules: {
            name: [
              {
                type: 'string',
                required: true,
                message: '请输入名称',
                trigger: 'blur'
              }
            ]
          }
        }
      },
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [

          /** 开始自动生成 */
          { title: '序号', minWidth: 80, key: 'id', align: 'center' },
          //   { title: '项目', minWidth: 100, key: 'name', align: 'center' },
          { title: '名称', minWidth: 200, key: 'name', align: 'left' },
          {
            title: '添加时间',
            key: 'createTime',
            align: 'center',
            minWidth: 140
          },
          {
            title: '修改时间',
            key: 'updateTime',
            align: 'center',
            minWidth: 140
          },
          //   { title: '评分标准 ', minWidth: 100, key: 'voCkecks', align: 'center' },
          /** 自动生成结束 */
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData(params.row.id)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: ''
      }
    }
  },
  methods: {
    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    },
    // 获取列表
    async  getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      that.queryData.pid = this.row.id
      that.queryData.type = 3
      AreaApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    // 修改二级标准
    postData () {
      const that = this
      console.log('==form==', this.modal.level2.formData)
      that.$refs['systemFrom'].validate(valid => {
        console.log('valid', valid)
        if (valid) {
          AreaApi.update(that.modal.level2.formData.id,
            that.modal.level2.formData
          )
            .then(res => {
              that.modal.level2.isShow = false
              that.modal.level2.loading = false
              if (!res.code) {
                that.getTableData()
                this.$emit('openUploadRow')
                that.$Notice.success({
                  title: '保存成功!'
                })
              } else {
                that.$Notice.error({
                  title: res.message
                })
              }
            })
            .catch(error => {
              Message.error(error)
            })
        } else {
          that.modal.level2.loading = false
          that.$nextTick(() => {
            that.modal.level2.loading = true
          })
        }
      })
    },

    // 删除
    delData (id) {
      this.$Modal.confirm({
        title: '确认删除',
        content:
            '<p>您确认删除id为 <strong>' +
            id.toString() +
            '</strong> 的规格属性吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          AreaApi.del(
            {
              ids: [id]
            }
          ).then(res => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
              this.$emit('openUploadRow')
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 显示修改弹窗
    showUpdateModal (row) {
      this.modal.level2.type = 'update'
      this.modal.level2.title = '修改评分标准'
      // 不请求后端，直接list取对象
      // this.modal.mallCategory.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      AreaApi.getDetail(row.id).then((res) => {
        this.modal.level2.formData = res.data
        this.$refs['systemFrom'].resetFields()
        this.modal.level2.isShow = true
      })
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
